<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			
			li{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 484px;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<ul>
				<li><img src="img/banner1.jpg"/></li>
				<li><img src="img/banner2.jpg"/></li>
				<li><img src="img/banner3.jpg"/></li>
				<li><img src="img/banner4.jpg"/></li>
				<li><img src="img/banner5.jpg"/></li>
				<li><img src="img/banner6.jpg"/></li>
			</ul>
		</div>
		<script type="application/javascript">
			main();
			
			function main(){
				var obj1 = document.getElementById('banner');
				var li = obj1.getElementsByTagName('li');
				var j = 0;
				var iIndex = 1;
				var timer;
				
				// 把第一张图片透明色设置为不透明，其他的设置为透明。
				for(var i = 0; i < li.length; i++){
					if(i == j){
						li[i].style.opacity = '1';
						continue; // 继续下一次循环，不用管下面的了
					}
					li[i].style.opacity = '0';
				}
				
				function startRoll(){
					j++;
					if(j >= li.length){
						j = 0;
					}
					li[j].style.zIndex = iIndex;
					iIndex++;
					fadeIn(li[j],1);
				};
				
				function fadeIn(obj, period){
					var COUNT = 50;
					clearInterval(obj.timer);
					obj.timer = setInterval(function(){
						var opacityValue = Number.parseFloat(obj.style.opacity);
						opacityValue += period/COUNT;
						if(opacityValue < 1){
							obj.style.opacity = opacityValue;
						}else{
							obj.style.opacity = 1;
							clearInterval(obj.timer);
							for(var i = 0; i < li.length; i++){
								if(i == j){
									continue;
								}
								li[i].style.opacity = '0';
							}
						}
					 },1000/COUNT);
				}
				
				timer = setInterval(startRoll,2000);
			}
		</script>
	</body>
</html>
